import { Card, Button } from "@/components/base";
import { Typography } from "@/components/typography";
import { Flex } from "@/components/flex";
import { CalendarOutlined, StarFilled } from '@ant-design/icons';
import { useNavigate } from "react-router-dom";

const { Text } = Typography;

interface ServiceRecord {
    id: string;
    type: string;
    date: string;
    rating: number;
    cost: number;
    duration: number;
    note: string;
}

interface Customer {
    serviceRecords: ServiceRecord[];
}

interface ServiceRecordsProps {
    customer: Customer;
}

/** 服务记录 */
export function ServiceRecords({ customer }: ServiceRecordsProps) {
    const navigate = useNavigate();

    const renderStars = (rating: number) => {
        return Array.from({ length: 5 }, (_, i) => (
            <StarFilled
                key={i}
                style={{
                    color: i < rating ? '#faad14' : '#f0f0f0',
                    fontSize: '12px'
                }}
            />
        ));
    };

    return (
        <Card>
            <Flex justify="space-between" align="center" style={{ marginBottom: '12px' }}>
                <Text size={16} strong>动态</Text>
                <Button
                    size="small"
                    onClick={() => navigate('/developing')}
                >
                    + 添加记录
                </Button>
            </Flex>

            {customer.serviceRecords.map((record) => (
                <Flex vertical gap={8} key={record.id} style={{
                    border: '1px solid #f0f0f0',
                    borderRadius: '8px',
                    padding: '12px',
                    marginBottom: '8px'
                }}>
                    <Flex justify="space-between" align="flex-start">
                        <div>
                            <Text size={14} strong style={{ display: 'block', marginBottom: '4px' }}>
                                {record.type}
                            </Text>
                            <Flex align="center" gap={8}>
                                <CalendarOutlined style={{ fontSize: '12px', color: '#666' }} />
                                <Text size={12} type="secondary">{record.date}</Text>
                                <Text size={12} type="secondary">•</Text>
                                <Text size={12} type="secondary">技师：小王</Text>
                                <Text size={12} type="secondary">•</Text>
                                <Text size={12} type="secondary">{record.duration}分钟</Text>
                            </Flex>
                        </div>
                        <Flex vertical align="flex-end">
                            <Text size={14} strong style={{ color: '#e91e63', marginBottom: '4px' }}>
                                ¥{record.cost}
                            </Text>
                        </Flex>
                    </Flex>
                    <Text size={12} type="secondary" style={{ lineHeight: '1.4' }}>
                        {record.note || '无备注信息'}
                    </Text>
                    <Flex align="center" gap={2}>
                        {renderStars(record.rating)}
                    </Flex>
                </Flex>
            ))}
        </Card>
    );
}
